<!--
	各省 (直辖市) 场地类型面积统计
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="type-area-statistics">
		<!-- 侧边tab切换组件 -->
		<SideTab v-model:active="active" :list="list" @change="onChangeSideTab"></SideTab>
		<div class="btn-expand" @click="onExpand">
			<!-- 展开 -->
		</div>
		<!-- 数据表格 -->
		<div class="type-area-grid">
			<el-table :data="tableData" :border="true" style="width: 100%" max-height="298"
				:cell-style="{ border: '1px solid #475ADB' }"
				:header-cell-style="{ border: '1px solid #475ADB', borderLeft: 'none' }">
				<el-table-column header-align="center" align="center" label="省（直辖市）" prop="province" />
				<el-table-column header-align="center" align="center" label="面积（平方公里）" prop="square" />
			</el-table>
		</div>
	</div>
</template>

<script setup name="TypeAreaStatistics">
import { ref } from 'vue';
// 侧边tab切换组件
import SideTab from '@/components/SideTab';
// 引入接口
import { getTypeAreaStatisticsApi } from '@/api/basicData'

// 组件事件监听
const emit = defineEmits(['change']);

// 展开按钮事件监听
const onExpand = (e) => {
	console.log('展开');
}

// 当前tab
let active = ref('0');
// 类型列表
const list = [
	{ label: 'I1类', value: '0', color: 'rgb(0, 11, 154)' },
	{ label: 'II类', value: '1', color: 'rgb(0, 13, 188)' },
	{ label: 'III类', value: '2', color: 'rgb(26, 66, 194)' },
	{ label: 'IV类', value: '3', color: 'rgb(20, 74, 255)' },
	{ label: 'V类', value: '4', color: 'rgb(52, 99, 255)' },
	{ label: '水体', value: '5', color: 'rgb(75, 117, 255)' },
	{ label: 'I0类', value: '6', color: 'rgb(103, 139, 255)' },
];
// 侧边tab切换组件改变事件监听
const onChangeSideTab = (item) => {
	if (typeof item == 'string') {
		active.value = item;
		// 加载数据
		getData();
		// 修改当前类型
		emit('change', active.value);
	} else if (item.value) {
		active.value = item.value;
		// 加载数据
		getData();
		// 修改当前类型
		emit('change', active.value);
	}
}

// 表格数据
let tableData = ref([
	// { province: '北京市', square: 231 },
	// { province: '天津市', square: 220 },
	// { province: '河北省', square: 195 },
	// { province: '山西', square: 193 },
	// { province: '内蒙古自治区', square: 189 },
	// { province: '辽宁省', square: 184 },
	// { province: '吉林省', square: 176 },
	// { province: '黑龙江省', square: 172 },
	// { province: '上海市', square: 168 },
	// { province: '江苏省', square: 161 },
	// { province: '浙江省', square: 152 },
]);

// 加载数据
const getData = () => {
	if (active?.value) {
		tableData.value.length = 0;
		getTypeAreaStatisticsApi({
			category: Number(active.value)
		}).then(res => {
			const { code, data } = res;
			if (code == 200 && data) {
				tableData.value = [...data];
			}
		}).catch(err => {
			console.log(err.message);
		})
	}
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
// 定义抛出内容
defineExpose({ active, onChangeSideTab });
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.type-area-statistics {
	padding: 5px;
	color: $white;
	position: relative;

	// 展开按钮
	.btn-expand {
		position: absolute;
		top: -30px;
		right: 10px;
		font-size: 14px;
		color: #46FFFF;
		cursor: pointer;
	}

	.type-area-grid {
		width: 100%;
		padding: 10px;

		:deep(.el-table) {
			--el-table-border-color: #475ADB;
			--el-table-border: 1px solid #475ADB;
			--el-table-text-color: $white;
			--el-table-header-text-color: $white;
			--el-table-row-hover-bg-color: transparent;
			--el-table-current-row-bg-color: transparent;
			--el-table-header-bg-color: linear-gradient(#081043 0%, #0B1864 65%, #1D388F 100%);
			--el-table-bg-color: transparent;
			--el-table-tr-bg-color: transparent;

			// 表头
			.el-table__header-wrapper {
				font-size: 16px;

				.el-table__row {
					margin: 0;
					height: 35px;
					line-height: 35px;
				}
			}

			// 表格
			.el-table__body-wrapper {
				font-size: 14px;

				.el-table__body {
					-webkit-border-vertical-spacing: 0; // 垂直间距
				}

				.el-table__row {
					margin: 0;
					height: 23px;
					line-height: 23px;
				}
			}

			.el-table__cell {
				height: 100%;
			}
		}
	}
}
</style>